<template>
	<view class="search">
		<view class="search-con">
			<u-search placeholder="搜索" :showAction="showAction" v-model="keywords"   :animation="false"   @clear="clear"  @custom='search' @search='search'  >
			</u-search>
		</view>
	</view>
</template>

<script>
	export default {
	 
		filters: {

		},
		data() {
			return {
				keywords:'',
				showAction: false,
				 
			}
		},
		onShow() {

		},
		created() {

		},

		methods: {
			search() {
				this.$emit('search',this.keywords)
			},
			clear(){
				this.keywords=''
				this.$emit('search',this.keywords)
			},
			clearSearch(){
				this.keywords=''
			}
		},
		watch:{
			keywords(val) {
				 if(val){
					this.showAction=true 
				 }else{
					 this.showAction=false 
				 }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.search {
		background: #fff;
		padding: 20rpx 32rpx 10rpx 32rpx;

		.search-con {
			width: 686rpx;
			height: 72rpx;
			
			::v-deep .u-search__content{
				background: #F0F2F5;
				border-radius: 12rpx;
			}
		}
	}
</style>
